<template>
  <div class="container-body">
    <section class="list" v-if="dataList.length">
      <section class="add-item" v-for="(item, index) in dataList" :key="index">
        <section class="item-container">
          <section>
            <i class="el-icon-notebook-2"></i>
            <!--                <img-->
            <!--                style="width: 48px; height: 45px"-->
            <!--                    src="~@/assets/img/yetSubscription.png"-->
            <!--                    alt=""-->
            <!--                />-->
          </section>
          <section class="title-item">
            <section>{{ item.modularName }}</section>
            <section class="describe" @click="infoHandler(item.modularDescribe)">模块说明</section>
          </section>
          <!-- <section class="icon-item" v-if="item.isDefault === 1">默认</section> -->
          <!--            <section class="container-item">-->
          <!--                已订阅-->
          <!--            </section>-->
          <!--          <section class="but-container">-->
          <!--            <el-checkbox v-model="checked"></el-checkbox>-->
          <!--          </section>-->
        </section>
        <!--          <section class="mark">-->
        <!--              <img src="~@/assets/img/subscribedIcon.png" alt=""/>-->
        <!--          </section>-->
      </section>
    </section>
    <!--  展示无数据页面   -->
    <Empty v-else></Empty>
    <InfoForm ref="infoForm"></InfoForm>
  </div>
</template>

<script>
import {getAllModular} from '@/api/modular/modular.js'
import InfoForm from './infoForm'

export default {
  data() {
    return {
      dataList1: [],
      dataList: [],
      value: true,
      tips: '努力加载中...',
      count: 10,
      loading: false,
      checked: false
    }
  },
  components: {
    InfoForm,
    Empty: () => import('@/components/Empty/index'),
  },
  methods: {
    // 获取订阅数据
    getAllModular(props) {
      this.loading = true
      getAllModular({}).then((res) => {
        if (res.data.code === '200') {
          this.dataList = res.data.result
          console.log(1111)
          console.log(this.dataList)
        }
        this.loading = false
      })
    },
    // 模块说明
    infoHandler(modularDescribe) {
      this.$refs.infoForm.init('view', modularDescribe)
    },
    del(index) {
    },
    edit() {
      this.$refs.areaForm.init('add')
    }
  },
  mounted() {
    this.getAllModular()
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/scss/config.scss";

.container-body {
  // margin: 0 auto;
  padding: 20px;

  .title-container {
    font-size: $title-font-size;
    font-weight: 400;
    color: #666666;
    padding-bottom: 20px;
  }

  .list {
    display: flex;
    width: 100%;
    flex-direction: row; /*设置子元素的排列方向*/
    flex-wrap: wrap; /*溢出则换行*/
  }

  .add-item {
    margin-left: 0.5%;
    margin-right: 0.5%;
    width: 19%;
    min-width: 210px;
    margin-bottom: 10px;
    height: 110px;
    background: #ffffff;
    border: 1px solid $--color-primary-liyu;
    box-shadow: 0px 0px 10px 1px rgba(51, 51, 51, 0.05);
    border-radius: 6px;
    position: relative;

    .item-container {
      display: flex;
      margin-top: 20px;
      margin-left: 20px;
      position: relative;

      i {
        font-size: 45px;
        color: $--color-primary-liyu;
      }
    }

    .title-item {
      margin-left: 20px;
      font-size: $title-font-size;
      font-weight: 400;
      color: #333333;

      .describe {
        margin-top: 10px;
        color: $--color-primary-liyu;
        cursor: pointer;
      }
    }

    .mark {
      position: absolute;
      right: 0;
      top: 0;
      width: 70px;

      img {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }

    .icon-item {
      background-color: rgb(245, 154, 35);
      padding: 2px 10px;
      color: #fff;
      font-size: 12px;
      position: absolute;
      right: 10px;
      top: 10px;
      border-radius: 3px;
    }

    .container-item {
      margin: 2% 0;
      padding-left: 10px;
      padding-right: 10px;
      font-size: $container-font-size;
      font-weight: 400;
      color: #999999;
    }

    .but-container {
      font-size: $title-font-size;

      font-weight: 400;
      color: #666666;
      display: flex;
      position: absolute;
      right: 15px;
      bottom: -108%;
    }
  }

  .list1 {
    width: 300px;
    height: 150px;
  }
}

::v-deep .el-dialog__footer {
  margin-top: -20px !important;
  padding: 0px 20px 15px !important;
  margin-bottom: 16px;
}

::v-deep .el-checkbox {
  top: -10px;
}
</style>
